<template>
  <div class="container">
    <div ref="searchBox">
      <el-form ref="modelForm" :model="queryPrams">
        <SearchArea
          :listUrl="pageUrl.list"
          @ok="getListData(pageUrl.list)"
          @reset="handleReset(modelForm, {}, pageUrl.list)"
        >
          <el-col :span="8">
            <BaseInput
              label="创建人"
              v-model="queryPrams.progressCreateName"
              prop="progressCreateName"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="类型"
              v-model="queryPrams.progressType"
              :options="[
                ['1', '前端开发'],
                ['2', '后端开发'],
              ]"
              prop="progressType"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="状态"
              v-model="queryPrams.progressStatus"
              :options="progressStatusSelect"
              prop="progressStatus"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="优先级"
              v-model="queryPrams.progressPriority"
              :options="[
                [0, '体验优化'],
                [1, 'bug修复'],
                [2, '进度阻断'],
                [3, '致命垄断'],
              ]"
              prop="progressPriority"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
        </SearchArea>
      </el-form>
    </div>
    <div class="list">
      <div class="actionList">
        <BaseButton :icon="Plus" @handleClick="handleOpen">新增</BaseButton>
      </div>
      <el-table
        :data="dataSourse"
        :max-height="tableHeight"
        :border="false"
        style="width: 100%"
        :highlight-current-row="true"
        row-key="uid"
      >
        <el-table-column type="index" align="center" label="序号" width="80" />

        <el-table-column
          prop="progressId"
          align="center"
          label="开发ID"
          width="150"
        />

        <el-table-column
          prop="progressCreateName"
          align="center"
          label="创建人"
          width="120"
        />

        <el-table-column
          prop="progressName"
          align="center"
          label="名称"
          width="200"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="progressType"
          align="center"
          label="类型"
          width="120"
        >
          <template #default="scope">
            <span>{{ progressType.get(scope.row.progressType) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="progressUserName"
          align="center"
          label="处理人"
          width="150"
        />

        <el-table-column
          prop="progressStatus"
          align="center"
          label="状态"
          width="120"
        >
          <template #default="scope">
            <span
              :style="`color: ${progressStatusColor.get(
                scope.row.progressStatus
              )}`"
              >{{ progressStatus.get(scope.row.progressStatus) }}</span
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="progressPriority"
          align="center"
          label="优先级"
          width="120"
        >
          <template #default="scope">
            <span
              :style="`color: ${progressPriorityColor.get(
                scope.row.progressPriority
              )}`"
              >{{ progressPriority.get(scope.row.progressPriority) }}</span
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="progressCreateTime"
          align="center"
          label="创建时间"
          width="170"
        />

        <el-table-column
          prop="progressCreateBegin"
          align="center"
          label="开始时间"
          width="140"
        />

        <el-table-column
          prop="progressCreateEnd"
          align="center"
          label="结束时间"
          width="140"
        />

        <el-table-column align="center" fixed="right" width="160">
          <template #header>
            <span>操作</span>
          </template>
          <template #default="scope">
            <div style="display: flex; justify-content: left">
              <el-button size="small" @click="handleOpen(scope.row)"
                >查看</el-button
              >
              <el-button
                v-if="scope.row.progressStatus === 6"
                size="small"
                type="danger"
                @click="deleteProgress(scope.row)"
                >移除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        :pageSourse="pageSourse"
        :pageSizes="[10, 20, 30, 50]"
        :queryPrams="queryPrams"
        :listUrl="pageUrl.list"
        layout="total, pager, jumper, sizes"
        @onSearch="getListData(pageUrl.list)"
      >
      </BasePagination>
    </div>
    <ProgressModal
      ref="ProgressModalRef"
      @refresh="getListData(pageUrl.list)"
    ></ProgressModal>
  </div>
</template>

<script setup lang="ts" name="admin-user">
import * as api from "@/api/index";
import { SearchArea } from "@components/FormSearch/index";
import {
  BaseInput,
  BaseSelect,
  BaseButton,
  BaseModal,
  BaseDate,
} from "@components/BaseForm/index";
import type { FormInstance } from "element-plus";
import usePageListData from "@/publicTs/pageListData";
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage as message } from "element-plus";
import {
  progressStatus,
  progressStatusColor,
  progressType,
  progressPriority,
  progressPriorityColor,
} from "@uilts/uilts-map";
import ProgressModal from "./modules/progress-modal.vue";
import { postAction } from "@/api/request";
interface ProgressModalRefType {
  handleShow: (val: boolean, item?: objectType<any>) => void;
}
let {
  pageSourse,
  dataSourse,
  queryPrams,
  handleReset,
  getListData,
  computedTableHeight,
} = usePageListData();

// form表单实例
let modelForm = ref<any>();
// 检索区元素
const searchBox: any = ref(null);

// 弹窗实例
let ProgressModalRef = ref<ProgressModalRefType | null>(null);

// 列表相关API
let pageUrl = {
  list: api.admin.URL_PROGRESSLIST,
  del: api.admin.URL_PROGRESSDEL,
};

/**
 * 打开新增 | 编辑弹窗
 * @param item 行数据 选传 用于子组件区分新增还是编辑
 */
let handleOpen = (item?: any) => {
  ProgressModalRef.value?.handleShow(true, item);
};

let progressStatusSelect = [
  [1, "未开始"],
  [2, "进行中"],
  [3, "已完成"],
  [4, "已暂停"],
  [5, "已逾期"],
  [6, "已作废"],
];

// table渲染高度
let tableHeight = ref(600);
onMounted(() => {
  // 页面挂载完成后获取列表数据
  handleReset(modelForm.value, {}, pageUrl.list);
  tableHeight.value = computedTableHeight(searchBox.value, 50);
});

/**
 * 移除任务(只允许移除已废弃的任务)
 * @param item 操作的行数据 必传
 */
let deleteProgress = (item: objectType<any>) => {
  if (item.progressStatus !== 6) {
    message.warning("只允许移除已废弃的任务！");
    return "";
  }
  postAction(pageUrl.del, { progressId: item.progressId }).then(
    (res: BaseResponse<boolean>) => {
      if (res.body) {
        getListData(pageUrl.list);
        message.success(res.header.message || "任务已移除");
      }
    }
  );
};
</script>

<style lang="less" scoped>
:deep(.el-table) {
  tr {
    height: 54px;
  }
}
.container {
  padding: 0px 24px;
  box-sizing: border-box;
  .list {
    .actionList {
      display: flex;
      justify-content: right;
      padding: 8px 16px;
    }
  }
}
</style>
